<template>
  <div class="menu-container scrool-w2 not-scrool">
    <!-- <div style="text-align: center; line-height: 60px; margin-top: 30px">
      <img src="../assets/img/logo.png" alt="" style="width: 70%" />
    </div> -->
    <el-menu
      default-active="/admin/home"
      class="menu"
      :collapse="props.isOpen"
      @open="handleOpen"
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :unique-opened="false"
      @select="selectMenu"
      @close="handleClose"
    >
      <el-menu-item>
        <el-icon><ChromeFilled /></el-icon>
        <template #title><h3>后台管理系统</h3></template>
      </el-menu-item>

      <el-menu-item
        v-for="item of noChild"
        :key="item.menuId"
        :index="item.path"
      >
        <el-icon :size="20">
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.menuName }}</span>
      </el-menu-item>
      <el-sub-menu
        v-for="item of hasChild"
        :index="item.path"
        :key="item.menuId"
      >
        <template #title>
          <el-icon :size="20">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.menuName }}</span>
        </template>

        <el-menu-item-group v-for="citem of item.children" :key="citem.menuId">
          <el-menu-item :index="citem.path">{{ citem.menuName }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import { ChromeFilled } from "@element-plus/icons-vue";

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: true,
  },
  menus: {
    type: Array,
    default: () => [],
  },
});

const noChild = computed(() => {
  return props.menus.filter((menu) => menu.visible == 1);
});

const hasChild = computed(() => {
  return props.menus.filter((menu) => menu.visible == 0);
});
</script>

<style scoped lang="scss">
.menu:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  border: none;
  border-right-width: 0;
}
.menu-container {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #545c64;
  font-size: 14px;
}
</style>
computed,
